<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inline Block</title>
    <style type="text/css">
        .main {
            width: 1200px;
            margin: 10px auto;
            border: 1px solid black;
        }

        p {
            height: 100px;
            width: 100px;
            background-color: #00aa00;
            border: 1px solid red;
        }

        .main .display_none_demo {
            display: none;
        }

        .main .display_inline_demo p {
            display: inline;
        }

        .main .display_block_demo span {
            display: block;
            width: 100px;
            height: 100px;
            border: 1px solid red;
            background-color: #84a3e3;
        }

        .main .display_inline_block_demo p {
            display: inline-block;
        }
        .main .display_inline_block_demo span {
            display: inline-block;
            background: aliceblue;
            padding: 50px 50px;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="display_none_demo">
        <p>
            第一个块级元素p
        </p>
        <p>
            第二个块级元素p
        </p>
    </div>

    <div class="display_inline_demo">
        <p>
            第三个块级元素p
        </p>
        <p>
            第四个块级元素p
        </p>
    </div>

    <div class="display_block_demo">
        <span>第一个span标签</span>
        <span>第二个span标签</span>
    </div>

    <!-- 具有行级标签横版排列属性，但是兼容块级属性： margin,padding等上下属性 display: inline-block; -->
    <div class="display_inline_block_demo">
        <p>第5个p标签</p>
        <span>第三个span标签</span>
        <p>第六个p标签</p>
    </div>
</div>
</body>
</html>